<template>
  <div class="request-form" id="app">
    <div class="request-form-left">
      <el-form :model="form" style="width: 800px">
        <!-- <el-table border="1px" style="border-collapse:collapse"> -->
        <el-form-item label="任务名称：">
          <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="请示上级：">
          <el-select v-model="form.selectLeader" multiple>
            <el-option
              v-for="(option, index) in form.leader"
              :key="index"
              :value="option.leaderAccount"
            >
              {{ option.leadername }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择下级：">
          <el-select v-model="form.xiashu" multiple>
            <el-option
              v-for="(option, index) in form.yuanxiashu"
              :key="index"
              :value="option.account"
            >
              {{ option.name }}
            </el-option>
          </el-select>
        </el-form-item>

        <!-- <el-form-item label="任务编码：">
          <el-input v-model="form.reqId" />
        </el-form-item> -->
        <el-form-item label="任务时间：">
          <el-col :span="11">
            <el-date-picker
              v-model="form.datetime"
              type="date"
              format="YYYY/MM/DD"
              value-format="YYYY-MM-DD"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>

        <el-form-item label="任务描述：">
          <el-input v-model="form.message" type="textarea" />
        </el-form-item>

        <el-form-item label="上传附件：">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            action="http://124.220.98.90:80/user/function/uploadFile"
            multiple
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-exceed="handleExceed"
            show-file-list="true"
            :on-success="uploadSuccuss"
            name="file1"
          >
            <el-button type="primary" name="file1">上传附件</el-button>
            <template #tip>
              <div class="el-upload__tip"></div>
            </template>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <div class="button">
            <el-button type="primary" @click="onSubmit">提交</el-button>
            <el-button type="reset">取消</el-button>
          </div>
        </el-form-item>
        <!-- </el-table> -->
      </el-form>
    </div>
    <div class="request-form-right"></div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'
import { onMounted, reactive, ref } from 'vue'
import SocketService from '../utils/websocket.js'
import { ElMessage, ElMessageBox, resultProps } from 'element-plus'
import axios from 'axios'
const store = useStore()
const form = reactive({
  account: '',
  title: '',
  message: '',
  annexPath: '',
  xiashu: [],
  leader: [],
  selectLeader: [],
  yuanxiashu: [],
  reqId: '', //自动生成的不用传
  datetime: '',
  uxs: [],
  answer: ''
})
form.account = sessionStorage.getItem('account')
const onSubmit = async () => {
  const { data: result } = await axios.post('user/function/uploadTask', {
    account: form.account,
    datetime: form.datetime,
    title: form.title,
    message: form.message,
    reqId: form.reqId,
    annexPath: form.annexPath,
    xiashu: form.xiashu
  })
  if (result.data) {
    alert('发送成功！')
  }

  //console.log(result.data)
  // console.log(form)
}

let useXiashu = reactive([])
const getXiashu_new = () => {
  axios({
    method: 'POST',
    url: 'user/function/querySuperior-subordinate',
    data: { account: form.account }
  }).then((response) => {
    // console.log(useXiashu)
    form.uxs = response.data.data
    form.uxs.forEach((item) => {
      //下属
      console.log(item)

      if (item.account == form.account) {
        form.leader.push(item)
      } else {
        form.yuanxiashu.push(item)
      }
      //console.log(form.uxs,form.leader)
    })

    // console.log(form.uxs[0])
    //console.log(form.uxs[0].leaderAccount)
  })
}
//sessionStorage.setItem('account',)
// const getUserList=async() =>{
//   const account=sessionStorage.getItem('account');
//   const {data:result}=await axios.post('')
// }
onMounted(getXiashu_new)
const fileList = ref([
  {
    name: 'file1',
    url: 'https://element-plus.org/images/element-plus-logo.svg'
  }
])
const handleRemove = (file1, uploadFiles) => {
  console.log(file1, uploadFiles)
}
const handlePreview = (uploadFile) => {
  console.log(uploadFile)
}
const handleExceed = (files, uploadFiles) => {
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  )
}
const beforeRemove = (uploadFile, uploadFiles) => {
  return ElMessageBox.confirm(`是否要删除附件： ${uploadFile.name} ?`).then(
    () => true,
    () => false
  )
}

const uploadSuccuss = (Response) => {
  form.annexPath = Response.annexPath
  //console.log(Response)

  console.log(form.annexPath)
}
</script>
<style>
.request-form {
  position: relative;
  margin: 0 auto;
  width: 1226px;
  height: 100%;
  text-align: center;
  /* left: 0; */
}
.request-form-left {
  position: absolute;
  text-align: center;
  left: 0;
}
.button {
  position: absolute;
  right: 0;
}
</style>
